<script setup lang="ts">
import { ref, markRaw, onMounted } from "vue";
import ReCol from "@/components/ReCol";
import { useDark, randomGradient } from "./utils";
import WelcomeTable from "./components/table/index.vue";
import { ReNormalCountTo } from "@/components/ReCountTo";
import { useRenderFlicker } from "@/components/ReFlicker";
import { ChartBar, ChartLine, ChartRound } from "./components/charts";
import Segmented, { type OptionsType } from "@/components/ReSegmented";
import { chartData, barChartData, progressData, latestNewsData } from "./data";
import { useScriptStore } from "@/store/modules/script";
import { getScriptList } from "@/api/scripts";

onMounted( () => {
  const scriptStore = useScriptStore();
   getScriptList({}).then(res => {
    scriptStore.addScript(res.data?.list);
  });
});
defineOptions({
  name: "Welcome"
});

const { isDark } = useDark();

let curWeek = ref(1); // 0上周、1本周
const optionsBasis: Array<OptionsType> = [
  {
    label: "上周"
  },
  {
    label: "本周"
  }
];
</script>

<template>
  <div>
    <el-row :gutter="24" justify="space-around">
      <re-col
        v-for="(item, index) in 1"
        :key="index"
        v-motion
        class="mb-[18px]"
        :value="6"
        :md="12"
        :sm="12"
        :xs="24"
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 80 * (index + 1)
          }
        }"
      >
        <div>预设的运营登录的页面</div>
<!--        <el-card class="line-card" shadow="never">-->
<!--&lt;!&ndash;          <div class="flex justify-between">&ndash;&gt;-->
<!--&lt;!&ndash;            <span class="text-md font-medium">&ndash;&gt;-->
<!--&lt;!&ndash;              {{ item.name }}&ndash;&gt;-->
<!--&lt;!&ndash;            </span>&ndash;&gt;-->
<!--&lt;!&ndash;            <div&ndash;&gt;-->
<!--&lt;!&ndash;              class="w-8 h-8 flex justify-center items-center rounded-md"&ndash;&gt;-->
<!--&lt;!&ndash;              :style="{&ndash;&gt;-->
<!--&lt;!&ndash;                backgroundColor: isDark ? 'transparent' : item.bgColor&ndash;&gt;-->
<!--&lt;!&ndash;              }"&ndash;&gt;-->
<!--&lt;!&ndash;            >&ndash;&gt;-->
<!--&lt;!&ndash;              <IconifyIconOffline&ndash;&gt;-->
<!--&lt;!&ndash;                :icon="item.icon"&ndash;&gt;-->
<!--&lt;!&ndash;                :color="item.color"&ndash;&gt;-->
<!--&lt;!&ndash;                width="18"&ndash;&gt;-->
<!--&lt;!&ndash;              />&ndash;&gt;-->
<!--&lt;!&ndash;            </div>&ndash;&gt;-->
<!--&lt;!&ndash;          </div>&ndash;&gt;-->
<!--&lt;!&ndash;          <div class="flex justify-between items-start mt-3">&ndash;&gt;-->
<!--&lt;!&ndash;            <div class="w-1/2">&ndash;&gt;-->
<!--&lt;!&ndash;              <ReNormalCountTo&ndash;&gt;-->
<!--&lt;!&ndash;                :duration="item.duration"&ndash;&gt;-->
<!--&lt;!&ndash;                :fontSize="'1.6em'"&ndash;&gt;-->
<!--&lt;!&ndash;                :startVal="100"&ndash;&gt;-->
<!--&lt;!&ndash;                :endVal="item.value"&ndash;&gt;-->
<!--&lt;!&ndash;              />&ndash;&gt;-->
<!--&lt;!&ndash;              <p class="font-medium text-green-500">{{ item.percent }}</p>&ndash;&gt;-->
<!--&lt;!&ndash;            </div>&ndash;&gt;-->
<!--&lt;!&ndash;            <ChartLine&ndash;&gt;-->
<!--&lt;!&ndash;              v-if="item.data.length > 1"&ndash;&gt;-->
<!--&lt;!&ndash;              class="!w-1/2"&ndash;&gt;-->
<!--&lt;!&ndash;              :color="item.color"&ndash;&gt;-->
<!--&lt;!&ndash;              :data="item.data"&ndash;&gt;-->
<!--&lt;!&ndash;            />&ndash;&gt;-->
<!--&lt;!&ndash;            <ChartRound v-else class="!w-1/2" />&ndash;&gt;-->
<!--&lt;!&ndash;          </div>&ndash;&gt;-->
<!--        </el-card>-->
      </re-col>

<!--      <re-col-->
<!--        v-motion-->
<!--        class="mb-[18px]"-->
<!--        :value="18"-->
<!--        :xs="24"-->
<!--        :initial="{-->
<!--          opacity: 0,-->
<!--          y: 100-->
<!--        }"-->
<!--        :enter="{-->
<!--          opacity: 1,-->
<!--          y: 0,-->
<!--          transition: {-->
<!--            delay: 400-->
<!--          }-->
<!--        }"-->
<!--      >-->
<!--        <el-card class="bar-card" shadow="never">-->
<!--          <div class="flex justify-between">-->
<!--            <span class="text-md font-medium">分析概览</span>-->
<!--            <Segmented v-model="curWeek" :options="optionsBasis" />-->
<!--          </div>-->
<!--          <div class="flex justify-between items-start mt-3">-->
<!--            <ChartBar-->
<!--              :requireData="barChartData[curWeek].requireData"-->
<!--              :questionData="barChartData[curWeek].questionData"-->
<!--            />-->
<!--          </div>-->
<!--        </el-card>-->
<!--      </re-col>-->

<!--      <re-col-->
<!--        v-motion-->
<!--        class="mb-[18px]"-->
<!--        :value="6"-->
<!--        :xs="24"-->
<!--        :initial="{-->
<!--          opacity: 0,-->
<!--          y: 100-->
<!--        }"-->
<!--        :enter="{-->
<!--          opacity: 1,-->
<!--          y: 0,-->
<!--          transition: {-->
<!--            delay: 480-->
<!--          }-->
<!--        }"-->
<!--      >-->
<!--        <el-card shadow="never">-->
<!--          <div class="flex justify-between">-->
<!--            <span class="text-md font-medium">解决概率</span>-->
<!--          </div>-->
<!--          <div-->
<!--            v-for="(item, index) in progressData"-->
<!--            :key="index"-->
<!--            :class="[-->
<!--              'flex',-->
<!--              'justify-between',-->
<!--              'items-start',-->
<!--              index === 0 ? 'mt-8' : 'mt-[2.15rem]'-->
<!--            ]"-->
<!--          >-->
<!--            <el-progress-->
<!--              :text-inside="true"-->
<!--              :percentage="item.percentage"-->
<!--              :stroke-width="21"-->
<!--              :color="item.color"-->
<!--              striped-->
<!--              striped-flow-->
<!--              :duration="item.duration"-->
<!--            />-->
<!--            <span class="text-nowrap ml-2 text-text_color_regular text-sm">-->
<!--              {{ item.week }}-->
<!--            </span>-->
<!--          </div>-->
<!--        </el-card>-->
<!--      </re-col>-->

<!--      <re-col-->
<!--        v-motion-->
<!--        class="mb-[18px]"-->
<!--        :value="18"-->
<!--        :xs="24"-->
<!--        :initial="{-->
<!--          opacity: 0,-->
<!--          y: 100-->
<!--        }"-->
<!--        :enter="{-->
<!--          opacity: 1,-->
<!--          y: 0,-->
<!--          transition: {-->
<!--            delay: 560-->
<!--          }-->
<!--        }"-->
<!--      >-->
<!--        <el-card shadow="never" class="h-[580px]">-->
<!--          <div class="flex justify-between">-->
<!--            <span class="text-md font-medium">数据统计</span>-->
<!--          </div>-->
<!--          <WelcomeTable class="mt-3" />-->
<!--        </el-card>-->
<!--      </re-col>-->

<!--      <re-col-->
<!--        v-motion-->
<!--        class="mb-[18px]"-->
<!--        :value="6"-->
<!--        :xs="24"-->
<!--        :initial="{-->
<!--          opacity: 0,-->
<!--          y: 100-->
<!--        }"-->
<!--        :enter="{-->
<!--          opacity: 1,-->
<!--          y: 0,-->
<!--          transition: {-->
<!--            delay: 640-->
<!--          }-->
<!--        }"-->
<!--      >-->
<!--        <el-card shadow="never">-->
<!--          <div class="flex justify-between">-->
<!--            <span class="text-md font-medium">最新动态</span>-->
<!--          </div>-->
<!--          <el-scrollbar max-height="504" class="mt-3">-->
<!--            <el-timeline>-->
<!--              <el-timeline-item-->
<!--                v-for="(item, index) in latestNewsData"-->
<!--                :key="index"-->
<!--                center-->
<!--                placement="top"-->
<!--                :icon="-->
<!--                  markRaw(-->
<!--                    useRenderFlicker({-->
<!--                      background: randomGradient({-->
<!--                        randomizeHue: true-->
<!--                      })-->
<!--                    })-->
<!--                  )-->
<!--                "-->
<!--                :timestamp="item.date"-->
<!--              >-->
<!--                <p class="text-text_color_regular text-sm">-->
<!--                  {{-->
<!--                    `新增 ${item.requiredNumber} 条问题，${item.resolveNumber} 条已解决`-->
<!--                  }}-->
<!--                </p>-->
<!--              </el-timeline-item>-->
<!--            </el-timeline>-->
<!--          </el-scrollbar>-->
<!--        </el-card>-->
<!--      </re-col>-->
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-card) {
  --el-card-border-color: none;

  /* 解决概率进度条宽度 */
  .el-progress--line {
    width: 85%;
  }

  /* 解决概率进度条字体大小 */
  .el-progress-bar__innerText {
    font-size: 15px;
  }

  /* 隐藏 el-scrollbar 滚动条 */
  .el-scrollbar__bar {
    display: none;
  }

  /* el-timeline 每一项上下、左右边距 */
  .el-timeline-item {
    margin: 0 6px;
  }
}

.main-content {
  margin: 20px 20px 0 !important;
}
</style>
